Styling gradient

Styling gradient background color

DXcharts supports applying a gradient background color using chart configuration.

To use a gradient, update the ChartAreaTheme settings:

export interface ChartAreaTheme {
    backgroundMode: 'regular' | 'gradient';
    backgroundColor: string;
    backgroundGradientTopColor: string;
    backgroundGradientBottomColor: string;
    gridColor: string;
}

By default, the background mode is set to regular, and the background color is controlled by the backgroundColor property.

To switch to a gradient background:

1. Set mode to gradient.
2. Define backgroundGradientTopColor and backgroundGradientBottomColor in your color configuration.

These properties can be updated via the colors API:

export const setColors = () => {
    const colors = {
        /* <your colors here> */
    };
    const element: HTMLElement = document.createElement('div');
    const chart = new Chart(element);
    chart.setColors(colors);
    return chart;
}

Example